<template>
  <div class="goods">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <template>
       
        <el-button type="primary" @click="goAddpage">添加商品</el-button>
        <el-table :data="goodsList" style="width: 100%" stripe border>
          <el-table-column type="index" label="序号" :index="indexMethod" width="50"> </el-table-column>
          <el-table-column label="商品名称" prop="goods_name" width=""></el-table-column>
          <el-table-column label="商品价格(元)" prop="goods_price" width="130px"></el-table-column>
          <el-table-column label="商品重量" prop="goods_weight" width="150px"></el-table-column>
          <el-table-column label="创建时间" prop="add_time" width="170px">
            <template slot-scope="scope">
              {{ scope.row.add_time | dateFormat }}
            </template>
          </el-table-column>
          <el-table-column label="操作" prop="" width="170px">
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-edit" size="mini" @click="editById(scope.row.goods_id)"></el-button>
              <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeById(scope.row.goods_id)"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!-- 分页 start -->
      <div class="block">
        <el-pagination
          layout="prev, pager, next,total, sizes"
          :page-sizes="[1, 2, 5, 10]"
          :page-size="queryInfo.pagesize"
          :total="total"
          :current-page="queryInfo.pagenum"
          @current-change="handleCurrentChange"
          @size-change="sizeChange"
        >
        </el-pagination>
      </div>
      <!-- 分页 end -->
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      goodsList: [],
      queryInfo: {
        query: '',
        pagenum: 1,
        pagesize: 10
      },
      /**分页**/
      total: 0
    }
  },
  mounted() {
    this.getgoodsList()
  },
  methods: {
    //添加商品
      goAddpage() {
      this.$router.push('/addGoods')
    },
    getgoodsList() {
      //获取列表
      this.$http
        .get('goods',{params:this.queryInfo})
        .then(result => {
          console.log(result.data)
          if (result.data.meta.status !== 200) {
            return this.$message.error('获取列表失败！')
          } else {
            this.goodsList = result.data.data.goods
            this.total = result.data.data.total
          }
        })
        .catch(err => {
          console.log(err)
        })
    },

    editById(id){
       console.log('编辑'+id)
    },
    removeById(id){
      console.log('删除'+id)
    },
    /**fenye */
     indexMethod(index) {
      return (this.queryInfo.pagenum - 1) * this.queryInfo.pagesize + index + 1
    },
    //每页条数改变
    sizeChange: function(n) {
      this.queryInfo.pagesize = n
      //console.log(n)
      this.getgoodsList()
    },
    // 监听 页码值 改变的事件 直接点第几页
    handleCurrentChange(newPage) {
      console.log(newPage)
      this.queryInfo.pagenum = newPage
      this.getgoodsList()
    }
  }
}
</script>
